<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="number" name="number" id="number">
  <br>
  <button onclick="buttonClick()">开始计算</button>
  <button onclick="stopClick()">停止计算</button>
  <p>计算结果：<span id="res"></span></p>
</body>
<script>
  /*
      斐波拉契数列
      F(0)=0，F(1)=1, F(n)=F(n - 1)+F(n - 2)（n ≥ 2，n ∈ N*）
      index: 0,1,2,3,4,5,6,7,8,9....
      value: 0,1,1,2,3,5,8,13,21,34....
  */
  /*
  // 用来计算次数
  let count = 0
  function F(n){
      count++
      if(n == 1 || n == 2){
          return 1
      }else {
          return F(n - 1)+F(n - 2)
      }
  }
  // 38
  // console.log(F(38))
  // console.log(count)

  function buttonClick(){
      let val = document.querySelector('#number').value
      // 防止出现小数，转换成 int 类型整型
      val = parseInt(val)
      document.querySelector('#res').innerText = F(val)
  }
  */

  // new Worker：开辟一个分线程，让一段代码在线程中执行
  let thread = new Worker('newThread.js')

  function buttonClick () {
    let val = document.querySelector('#number').value
    // 防止出现小数，转换成 int 类型整型
    val = parseInt(val)

    /*
        线程与线程之间的作用域是独立的，不能相互访问，只能
        通过 Message 来相互传值，通过 postMessage() 函数
        可以给另一个线程传值
    */
    thread.postMessage([val, '嵩漭', '清碧'])

  }

  // 当分线程调用 postMessage 时，会触发回调
  thread.onmessage = function (event) {
    console.log(event.data)
    // 将计算后的结果显示在页面中
    document.querySelector('#res').innerText = event.data
  }

  // 停止计算的点击方法
  function stopClick () {
    // 中断分线程，terminate 关闭一个分线程，分线程
    // 一旦被关闭之后，还未执行的操作都会立即停止执行
    // 而且不会给主线程再发生消息
    thread.terminate()
  }
</script>

</html>
